<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>前端实训</title>
        <link href="./css/main.css" type="text/css" rel="stylesheet" />
        <style type="text/css">

            h2{
                background-color: aqua;
            }

            input[type="radio"]{
                width: 20px;
                height: 20px;
            }

            a:hover{
                text-decoration: underline;
            }

            p::selection {
                background-color:orange;
                color:white;
            }

            div.static{
                position: static;
                border: 3px solid #73AD21;
            }


        </style>
    </head>

    <body>
        <div id="homework1">作业一：</div>
        
        <div>
            <p class="details"
            style="color: red; margin-left: 20ix;">
                简介、结构、语义标签、区域标签、标题标签、超链接标签</p>
            <p>作业：</p>
                机器环境，代码仓库， html 标签
        </div>

        <p>======标题标签======</p>
        <div>
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
        </div>

        <p>======超链接标签======</p>
        <a href="http://www.sfac.xyz:8000/notes/UI/Html.html" target="_blank">
            <fornt color="Crimson">
                Htmlprctice
            </fornt>
        </a>
    </body>

    <body>
        <P>======图像标签======</P>
        <img alt="" src="https://pic.netbian.com/uploads/allimg/220612/155625-16550205853789.jpg">

        <p>======表单标签======</p>
        <form action="#" method="post">
            <p>
                <input type="hidden" id="useId" name="userId" value="1" />
            </p>

            <p>
                <label for="userName">用户名：</label>
                <input type="text" id="userName" name="userName" value="Tangjinhu" />
            </p>

            <p>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password">
            </p>

            <p>
                <label for="sex">性别：</label>
                <input type="radio" name="sex" value="male" checked />Male
                <input type="radio" name="sex" value="female" />Female
            </p>

            <p> 
                <label for="hobby"></label>
                <input type="checkbox" name="hobby" value="音乐" checked>音乐
                <input type="checkbox" name="hobby" value="游戏" checked>游戏
                <input type="checkbox" name="hobby" value="电影">电影
                <input type="checkbox" name="hobby" value="看书">看书
            </p>

            <p>
                <select name="cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                    <option value="bugatti" selected>Bugatti</option>
                </select>
            </p>

            <p>
                <textarea name="desc" id="desc  cols="20" rows="4"></textarea>
            </p>

            <p>
                <input type="button" name="btn01" value="按钮" />
                <input type="reset" name="btn02" value="重置" />
                <input type="submit" name="btn03" value="提交" />
            </p>

            <p>
                <input type="date" name="currentDate" />
                <input type="number" min="1" max="20" step="1" />
                <input type="email" name="email" />
            </p>

            <P>======datalist标签======</P>
            <p>
                <input list="dl" />
                <datalist id="dl">
                    <option value="jingjiquanqiuhua">经济全球化</option>
                    <option value="yidaiyilu">一带一路</option>
                    <option value="guoneidaxunhuan">国内大循环</option>
                </datalist>
            </p>

            <p>======表格标签======</p>
            <p id="table1">
                <table>
                    <tr>
                        <td>id</td>
                        <td>name</td>
                        <td>age</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Jack</td>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Tom</td>
                        <td>23</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Mary</td>
                        <td>22</td>
                    </tr>
                </table>
            </p>

            <p>======列表标签======</p>
            <ol start="1">
                <li>这是标签1</li>
                <li>这是标签2</li>
                <li>这是标签3</li>
                <li>这是标签4</li>
            </ol>
            <dl>
                <dt>一级标签1</dt>
                <dt>二级标签1</dt>
                <dt>二级标签2</dt>
                <dt>二级标签3</dt>
                <dt>一级标签2</dt>
                <dt>二级标签4</dt>
                <dt>二级标签5</dt>
                <dt>二级标签6</dt>
            </dl>
            <p>======视频标签======</p>
            <p>
                <video 
                src="D:\Program Files\JiJiDown\Download\《爱你》王心凌.mp4"
                width="600px"
                height="400px"
                controls="controls"
                ></video>
            </p>
            <p>======音频标签======</p>
            <P>
                <audio src="D:\QQmusic\pink glass - i can't.mp3"
                width="200px"
                height="100px"
                controls="controls"></audio>
            </P>
    </body>    
</html>